<template>
    <div class="film-detail" cloak v-if="data" @touchstart = "touchstart" @touchmove.prevent = "touchmove">
        <div class="film-detail-pic" @click="$router.go(-1)">
            <img :src="data.poster" alt="">
        </div>
        <div class="film-detail-info">
            <h5>{{data.name}}</h5>
            <p class="film-category">{{data.category}}</p>
            <p class="film-on">{{time}}  上映</p>
            <p class="film-time">{{data.nation}}|{{data.runtime}}分钟</p>
            <p class="film-synopsis">{{data.synopsis}}</p>
        </div>
        <div class="addFilm">
            <button>-</button>
            <input type="number" v-model="filmNumber">
            <button @click = "addFlim">+</button>
        </div>
        <div class="add" @click = "add">
            添加
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import axios from 'axios'

export default {
  name: 'mzdetails',
  data () {
    return {
      data: null,
      touchInfo: {
          startX: 0,
          startY:0
      },
      filmNumber: 1
    }
  },
  created () {
    axios.get('/film/details', {
      params: {
        filmId: this.$route.params.detail
      }
    }).then((res) => {
      var result = res.data;
      console.log(result);
      if(result.status == 0){
          this.data = result.data[0];
          console.log(this.data.name);
      }else{
          alert(res.msg);
      }
    })
  },
  computed: {
      time () {
          console.log(this.data.premiereAt)
          return this.timeString(this.data.premiereAt*1000);
      }
  },
  methods: {
      /**
       * params {*}  time 传递一个时间戳或者是时间格式的字符串
       * return String 返回得到的为格式化之后的时间 xxxx - xx - xx （年-月-日） 
       */
      timeString (time) {
          var time = new Date(time);
          var year = time.getFullYear();
          var month = time.getMonth();
          var date = time.getDay();
          return year + '-' + month + '-' + date;
      },
      /**
       * 手势触摸事件
       */
      touchstart(e){
          this.touchInfo.startX = e.touches[0].pageX;
          this.touchInfo.startY = e.touches[0].pageY;
      },
     /**
      * 手势在屏幕中移动，进行上一页下一页
      */
      touchmove(e){
          var endX = e.touches[0].pageX;
          var endY = e.touches[0].pageY;
          var xLength = endX - this.touchInfo.startX;
          var yLength = endY - this.touchInfo.startY;
          // 左滑退后
          if(xLength >100){
            this.$router.go(-1);
          }
          // 右滑前进
          if(xLength < -100){
            this.$router.go(1);
          }
          console.log(xLength);

      },
      /**
       * 添加电影（最原始的方式）
       */
      addFlim () {
            var params = this.data;
            params.number = 1;
             this.$store.commit('addFilm',params);   
      },
      add (){
          var params = this.data;
          params.number = parseInt(this.filmNumber);
          console.log(this.filmNumber,params.number);

          this.$store.commit('addFilm',params);  
      }    
  }

}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';

.film-detail{
    display: flex;
    flex-direction: column;
    height: 100%;
    .film-detail-pic{
        height: px2rem(211);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .film-detail-info{
      padding: px2rem(15);
      h5{
          font-size: px2rem(18);
          font-weight: 400;
          color: #191a1b;
      }  
      p{
          font-size: px2rem(13);
          color: #797d82;
      }
      .film-category{
          margin-top: px2rem(8);
      }
      .film-on{
          margin-top: px2rem(8);
      }
      .film-time{
          margin-top: px2rem(10);
      }
      .film-synopsis{
          margin-top: px2rem(12);
          height: px2rem(38);
          overflow: hidden;
      }
    }
    .addFilm{
        align-self: flex-end;
        width: px2rem(400);
        height: px2rem(50);
        align-self: center;
        display: flex;
        input[type=number]{
            flex:1;
            text-align: center;
            font-size: px2rem(16);
        }
        button{
            width: px2rem(50);
        }
    }
    .add{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        height: px2rem(50);
        background-color: orange;
        text-align: center;
        line-height: px2rem(50);
        color: #ffffff;
        font-weight: 700;
        font-size: px2rem(16);
    }
}
</style>
